<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Ace Editor</title>
    <style>
        #editor {
            width: 100%;
            height: 500px;
        }

        /* Adjust fold widget size and color */
        .ace_gutter-cell .ace_fold-widget {
            width: 11px; /* Default width */
            height: 11px; /* Default height */
            background-color: #7f97f7; /* Set fold widget color */
            border-radius: 1px; /* Optional: rounded corners */
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-sql.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
</head>
<body>
    <div id="editor">
        SELECT (column1, column2, column3)
        FROM table_name
        WHERE condition;

        SELECT column1, column2, column3
        FROM table_name
        WHERE condition;
    </div>

    <script>
        (function() {
            const ace = window.ace;
            const Range = ace.require('ace/range').Range;
            const BaseFoldMode = ace.require('ace/mode/folding/fold_mode').FoldMode;
            const SqlMode = ace.require('ace/mode/sql').Mode;

            class MySqlFoldMode extends BaseFoldMode {
                constructor() {
                    super();
                    this.foldingStartMarker = /\bSELECT\b|\bCASE\b|\(/i;
                    this.foldingStopMarker = /\bFROM\b|\bEND\b|\)/i;
                }

                getFoldWidget(session, foldStyle, row) {
                    const line = session.getLine(row);
                    if (this.foldingStartMarker.test(line)) {
                        return 'start';
                    }
                    if (this.foldingStopMarker.test(line)) {
                        return 'end';
                    }
                    return '';
                }

                getFoldWidgetRange(session, foldStyle, row) {
                    const line = session.getLine(row);
                    const match = line.match(this.foldingStartMarker);

                    if (match) {
                        const startColumn = match.index + match[0].length;
                        const startRow = row;
                        let maxRow = session.getLength();
                        let endRow = row;
                        let endColumn = line.length;

                        let openBrackets = 0;
                        let insideCase = false;

                        while (++row < maxRow) {
                            line = session.getLine(row);
                            if (line.match(this.foldingStartMarker)) {
                                if (line.indexOf('(') !== -1) {
                                    openBrackets++;
                                }
                                if (/CASE/i.test(line)) {
                                    insideCase = true;
                                }
                            }
                            const stopMatch = line.match(this.foldingStopMarker);
                            if (stopMatch) {
                                if (stopMatch[0] === ')') {
                                    if (openBrackets === 0) {
                                        endRow = row;
                                        endColumn = stopMatch.index;
                                        break;
                                    } else {
                                        openBrackets--;
                                    }
                                } else if (/END/i.test(stopMatch[0]) && insideCase) {
                                    endRow = row;
                                    endColumn = stopMatch.index;
                                    break;
                                } else if (/FROM/i.test(stopMatch[0]) && openBrackets === 0 && !insideCase) {
                                    endRow = row;
                                    endColumn = stopMatch.index;
                                    break;
                                }
                            }
                        }

                        if (endRow > startRow) {
                            return new Range(startRow, startColumn, endRow, endColumn);
                        }
                    }
                }
            }

            const editor = ace.edit('editor');
            const sqlMode = new SqlMode();
            sqlMode.foldingRules = new MySqlFoldMode();
            editor.session.setMode(sqlMode);
            editor.session.setFoldStyle('markbeginend');
            editor.setTheme('ace/theme/monokai');
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
        })();
    </script>
</body>
</html>
